<template>
	<view class="order-detail-container">
		<view class="order-status" v-if="orderDetail.order_status == 0">
			<image class="image" src="../../static/images/mall/clock@2x.png" mode=""></image>
			<text class="tips-status">待付款</text>
			<text class="tips-title">请在30分钟内支付，超时订单自动取消哦～</text>
		</view>
		<view class="item-list" @click="clickXiang(orderDetail)"><OrderItem :itemList="orderDetail.carts_info"></OrderItem></view>
		<view class="order-total-price">
			
			
			<view class="total-price">
				<view style="display: flex;justify-content: space-between;width: 100%;">
					<text>订单总额</text>
					<text>￥{{orderDetail.total_price}}</text>
				</view>
			</view>
			
			<view class="discount">
				<view class="left">
					<text >用{{orderDetail.use_roses_num}}支玫瑰抵扣了{{orderDetail.deduction| moneyFormat}}元</text>
				</view>
				<view class="right">- ¥ {{orderDetail.deduction| moneyFormat}}</view>
			</view>
			
			<view class="discount" v-if="orderDetail.order_status == -1 || orderDetail.order_status == -2 || orderDetail.order_status == -3 || orderDetail.order_status == -4">
				<view class="left">
					<text >退款金额</text>
				</view>
				<view class="right">{{orderDetail.refund.refund_fee}}</view>
			</view>
			
			<view class="ultimate-price">
				<view class="count">共{{orderDetail.carts_info.length}}件</view>
				<view class="reality-price">
					<text class="label">实付：</text>
					<text class="price">￥{{orderDetail.pay_price | moneyFormat}}</text>
				</view>
			</view>
			
			
			
		</view>
		<view class="link-customer">
			<button type="primary" class="text" style="background-color: #FFFFFF;color: #000000;font-size: 22upx;margin-left: -26upx;width: 100%;" open-type="contact">
			<image src="../../static/images/mall/kefu@2x.png" mode=""></image>
			联系客服
			</button>
		</view>
		<view class="order-info" style="margin-bottom: 0;">
			<text class="header">订单信息</text>
			<view class="order-num">
				<text class="label">订单号：</text>
				<text class="value">{{ orderDetail.order_id }}</text>
				<text class="copy-btn" @tap.stop="copy(orderDetail.order_id)">复制</text>
			</view>
			<view class="create-time">
				<text class="label">下单时间：</text>
				<text class="value">{{ getYMDHMS(orderDetail.created_time) }}</text>
			</view>
			<view class="pay-way">
				<text class="label">支付方式：</text>
				<text class="value">微信支付</text>
			</view>
			<view class="pay-time">
				<text class="label">支付时间：</text>
				<text class="value">{{ getYMDHMS(orderDetail.created_time) }}</text>
			</view>
			<view class="remark">
				<text class="label">订单备注：</text>
				<text class="value">{{ orderDetail.buyer_message }}</text>
			</view>
		</view>
		
		<view class="order-info"  v-if="orderDetail.order_status === 1 || orderDetail.order_status === 4">
			<text class="header">收货人信息</text>
			<view class="order-num">
				<text class="label">收货人：</text>
				<text class="value">{{ orderDetail.address_info.name }}</text>
			</view>
			<view class="create-time">
				<text class="label">收货人手机号：</text>
				<text class="value">{{ orderDetail.address_info.phone }}</text>
			</view>
			<view class="pay-way">
				<text class="label">收货人地址：</text>
				<text class="value">{{ orderDetail.address_info.province_name  }}{{orderDetail.address_info.city_name}}{{orderDetail.address_info.area_name}}</text>
			</view>
		</view>
		
		
		
		<view class="footer">
			<!-- <view v-if="isTuiAnShow"> -->
				<text class="btn" v-if="orderDetail.order_status === 1 || orderDetail.order_status === 4 || orderDetail.order_status === -4" @click="clickShou(orderDetail.order_id)">申请售后</text>
			<!-- </view> -->
			<!-- <view v-if="orderDetail.order_status === -4">
				<text class="btn"  @click="clickShou(orderDetail.order_id)">申请售后</text>
			</view> -->
			<text class="btn pay-btn" v-if="orderDetail.order_status === 4" @click="clickMai(orderDetail)">再次购买</text>
			<text class="btn pay-btn" v-if="orderDetail.order_status === 1" @click="sureShop(orderDetail.order_id)">确认收货</text>
			<!-- <text class="btn" v-if="orderDetail.order_status === 4">评价</text> -->
			<text class="btn pay-btn" v-else-if="orderDetail.order_status === 0" @click="submitPay(orderDetail.order_id)">去支付</text>
		</view>
	</view>
</template>

<script>
	import {
		loadVipinfo
	} from '@/api/user/user.js';
import OrderItem from '@/pageA/order-item/order-item.vue';
export default {
	components: {
		OrderItem
	},
	data() {
		return {
			tuikuanMoney : 0,
			orderDetail: {},
			todyTime : '',
			isTuiAnShow : false,
			meiguiCont : 0,
			isGou : 0
		};
	},
	onLoad(options) {
		this.order_id = options.id;
		uni.getStorage({
			key: 'vipInfo',
			success: res => {
				this.meiguiCont = res.data.balance
				console.log(res)
			}
		});
	},
	methods: {
		clickXiang(str){
			console.log(str)
			uni.navigateTo({
				url: `/pageA/product-detail/product-detail?id=${str.carts_info[0].p_id}`
			});
		},
		// 时间戳转时间格式
		getYMDHMS (timestamp) {
		  let time = new Date(timestamp)
		  let year = time.getFullYear()
		  let month = time.getMonth() + 1
		  let date = time.getDate()
		  let hours = time.getHours()
		  let minute = time.getMinutes()
		  let second = time.getSeconds()
			
		  if (month < 10) { month = '0' + month }
		  if (date < 10) { date = '0' + date }
		  if (hours < 10) { hours = '0' + hours }
		  if (minute < 10) { minute = '0' + minute }
		  if (second < 10) { second = '0' + second }
		  return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
		},
		clickMai(str){
			uni.redirectTo({
				url: '/pageA/product-detail/product-detail?id='+str.carts_info[0].p_id
			});
		},
		daysDistance(date) {     
		   var oDate = new Date();
		   var nY = oDate.getFullYear();
		   var nM = oDate.getMonth();
		   var nD = oDate.getDate();
		   var newDate = new Date(nY,nM,nD,0,0,0);
		   var date = date.split('-');
		   var lastDate = new Date(date[0],(date[1]-1),date[2],0,0,0);
		   var result = '';
		   if(newDate.getTime() > lastDate.getTime()){
			   result = (newDate.getTime()-lastDate.getTime())/86400000;
		   }
		   if(result > 7){
			   this.isTuiAnShow = false;
		   }else{
			   this.isTuiAnShow = true
		   }
		},
		sureShop(str){
			this.$request
				.post({
					url: 'order/confirm',
					data: {
						order_id: str
					}
				})
				.then(r => {
					uni.showToast({
						icon: 'none',
						title: '确认收货成功',
						duration:1000
					});
					var that = this;
					setTimeout(function(){
						that.getOrderDetail();
					},1000)
				})
				.catch(err => {
					console.log(err);
				});
		},
		initData() {
			this.getOrderDetail();
		},
		getOrderDetail() {
			this.$request
				.get({
					url: 'order/detail',
					data: {
						order_id: this.order_id
					}
				})
				.then(r => {
					this.orderDetail = r.data;
					this.tuikuanMoney = this.orderDetail.pay_price
					console.log(this.orderDetail.payment_time)
					this.daysDistance(String(this.orderDetail.payment_time).slice(0,10))
				})
				.catch(err => {
					console.log(err);
				});
		},
		copy(content) {
			uni.setClipboardData({
				data: content,
				success: function() {
					uni.showToast({
						icon: 'none',
						title: '复制成功'
					});
				}
			});
		},
		clickShou(str){
			uni.redirectTo({
				url: '/pageA/order_tui/order-tui?id='+str
			});
		},
		submitPay(order_id) {
				this.$request
					.post({
						url: 'order/wxpay',
						data: {
							order_id,
							trade_type: 'miniapp'
						}
					})
					.then(r => {
						if (r.status === 1) {
							uni.requestPayment({
								...r.data,
								success: () => {
									
									loadVipinfo().then(res => {
										if (res.status == 1) {
											uni.setStorageSync('vipInfo', res.data);
											getApp().globalData.vipInfo = res.data;
											console.log("this.globalData.vipInfo-------=", getApp().globalData.vipInfo);
										}
									});
									
									uni.showToast({
										icon: 'none',
										title: '支付成功'
									});
									uni.redirectTo({
										url: '/pageA/order/order?state=-1'
									});
								},
								fail: res => {
									uni.showToast({
										icon: 'none',
										title: '取消支付'
									});
								},
								complete: () => {}
							});
						}
					});
			
		}
	},
	
	onShow() {
		this.initData();
	}
};
</script>

<style scoped lang="less">
@import '@/static/css/theme.less';
@import '@/static/css/util.less';
.tuikuan{
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	.right{
		display: flex;
	}
	text{
		border: 1px solid #cccccc;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
	}
	input{
		width: 100rpx;
		text-align: center;
		margin-top: 3rpx;
	}
}

	button::after{
		border: 0;
	}
.order-detail-container {
	background-color: @fff;
	.order-status {
		width: 100%;
		line-height: 84upx;
		background: @defaultBg;
		display: flex;
		align-items: center;
		padding: 0 32upx;
		color: @fff;

		.image {
			width: 40upx;
			height: 40upx;
		}

		.tips-status {
			font-size: 30upx;
			margin: 0 20upx 0 16upx;
		}

		.tips-title {
			font-size: 26upx;
		}
	}

	.item-list {
		padding: 40upx 32upx;
		border-bottom: 2upx solid #dfe1ec;
	}

	.order-total-price {
		padding: 22upx 32upx;

		.total-price {
			display: flex;
			justify-content: space-between;
			color: #474a58;
			font-size: 26upx;
			line-height: 36upx;
		}

		.discount {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26upx;
			color: #474a58;
			margin-top: 22upx;
			margin-bottom: 28upx;

			.left {
				display: flex;
				align-items: center;

				.select-icon {
					width: 40upx;
					height: 40upx;
				}

				.flower-icon {
					width: 30upx;
					height: 36upx;
					margin: 0 10upx 0 22upx;
				}
			}

			.right {
			}
		}

		.ultimate-price {
			font-size: 26upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.count {
				color: #474a58;
			}

			.reality-price {
				.label {
					font-weight: 500;
					font-size: 30upx;
					line-height: 42upx;
				}

				.price {
					color: @defaultC;
				}
			}
		}
	}

	.link-customer {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 2upx solid #dfe1ec;
		border-bottom: 2upx solid #dfe1ec;

		image {
			width: 36upx;
			height: 40upx;
			margin-right: 10upx;
		}

		font-size: 26upx;
		color: #8389a0;
	}

	.order-info {
		margin-bottom: 98upx;
		padding: 30upx 32upx 50upx 32upx;

		.header {
			color: #474a58;
			font-size: 30upx;
			font-weight: 500;
			line-height: 42upx;
		}

		.order-num,
		.create-time,
		.pay-way,
		.pay-time,
		.remark {
			line-height: 36upx;
			margin-top: 20upx;
		}

		.label {
			font-size: 26upx;
			color: #8389a0;
		}

		.value {
			font-size: 26upx;
			color: #474a58;
		}

		.copy-btn {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: #474a58;
			width: 100upx;
			height: 52upx;
			border-radius: 4upx;
			border: 2upx solid rgba(223, 225, 236, 1);
			margin-left: 20upx;
		}
	}

	.footer {
		background-color: @fff;
		border-top: 1upx solid #e9ebf0;
		width: 100%;
		height: 98upx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 10upx 32upx;

		.btn {
			width: 178upx;
			height: 80upx;
			border-radius: 4upx;
			font-size: 34upx;
			color: #474a58;
			border: 2upx solid rgba(223, 225, 236, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20upx;
		}

		.pay-btn {
			background: @defaultBg;
			color: #fff;
			border: none;
		}
	}
}
</style>
